<template>
  <div ref="imageWrapper">
    <a-row :gutter="24" style="margin: 0">
      <a-col :md="5" :sm="24" style="height: calc(100vh - 150px)">
        <a-card style="border-radius: 25px; height: 100%">
          <template slot="title">
            <span style="color: #2e4cba">主题分类</span>
          </template>
          <div class="dataCol-menu">
            <a-menu
              style="width: 96%; margin: 10px auto; border: 1px solid #d9d9d9"
              mode="vertical"
              :default-selected-keys="['all']"
              @click="handleClick"
            >
              <a-menu-item key="all"> 全部 </a-menu-item>
              <a-menu-item v-for="report in classification" :key="report.id" :keyPath="'111'">{{
                report.modelName
              }}</a-menu-item>
            </a-menu>
          </div>
        </a-card>
      </a-col>
      <a-col :md="19" :sm="24" style="height: calc(100vh - 150px)">
        <a-card style="border-radius: 25px; height: 100%">
          <template slot="title">
            <a-input-search
              v-model="queryParam.modelName"
              placeholder="请输入关键字搜索"
              style="width: 400px"
              enter-button
              @search="onSearch"
            />
          </template>
          <a-spin size="large" class="card-item-loding" :spinning="loading" v-show="loading" />
          <div v-show="!loading" class="card-item-content">
            <BaseDatilebox
              v-for="(item, index) in dataSource"
              :key="index"
              :itemData="item"
              @DataCheck="handleDataCheck"
              @EyeCheck="ShowConstructureCheck"
            />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <CheckOrganModal ref="CheckOrganModal" :urlList="url.DataStructure" :columns="columns"></CheckOrganModal>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import BaseDatilebox from './BaseDatilebox'
import CheckOrganModal from './CheckOrganModal'
import columns1 from './columns.js'
export default {
  components: { BaseDatilebox, CheckOrganModal },
  data() {
    return {
      isactive: true,
      dataSource: [],
      classification: [],
      queryParam: {
        reportCategoryId: 'all',
        tableName: '',
        modelType: '2',
        pid: '',
        modelName:''
      },
      queryMenu: {
        modelType: '1',
        pid: '0',
      },
      total: 0,
      loading: false,
      url: {
        classification: '/sjzcml/dataModelTopic/queryModelTopic',
        detailBoxList: '/sjzcml/dataModelTopic/queryModelGatherStatus',
        DataRelation: '/sjzcml/dataModelTopic/queryDataRelation',
        DataStructure: '/sjzcml/dataModelTopic/queryDataStructure',
      },
      columns: columns1(this),
    }
  },
  mounted() {
    // 生成左侧菜单
    this.getReportList()
    this.getDetailBox()
  },
  methods: {
    onSearch() {
      this.getDetailBox()
    },
    // 会计科目
    ShowConstructureCheck(record) {
      this.$refs.CheckOrganModal.show({ tableName: record.changeName },record.modelName)
    },
    handleDataCheck(record) {
      getAction(this.url.DataRelation, { tableName: record.changeName }).then((res) => {
        if (res.success && res.result.length) {
          this.$router.push({
            path: '/sjxmzygl/yzzx/sbwzyz',
            query: {
              ...res.result[0],
            },
          })
        }
      })
    },
    handleClick({ item, key, keyPath }) {
      if (key == 'all') {
        this.queryParam.pid = ''
      } else {
        this.queryParam.pid = key
      }
      this.getDetailBox()
    },
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a class="prev-page">上一页</a>
      } else if (type === 'next') {
        return <a class="next-page">下一页</a>
      }
      return originalElement
    },
    getDetailBox() {
      this.loading = true
      getAction(this.url.detailBoxList, this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        } else {
          console.log(res)
        }
        this.loading = false
      })
    },
    getReportList() {
      getAction(this.url.classification, this.queryMenu).then((res) => {
        if (res.success && res.result.length > 0) {
          this.classification = res.result
        } else {
          console.log(res)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 0px 20px;
  position: relative;
  overflow-x: scroll;
  height: calc(100vh - 220px);
  .card-item-loding {
    position: absolute;
    top: 45%;
    left: 48%;
  }
}
/deep/ .ant-input-group {
  /deep/ .ant-input-group-addon {
    /deep/ .ant-btn-primary {
      background-color: #fff;
      border-color: #fff;
    }
  }
}
.dataCol-menu {
  height: 100%;
  overflow-x: scroll;
  /deep/ .ant-menu-item {
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #d9d9d9;
  }
  /deep/ .ant-menu-item-selected {
    color: #ef9325;
    background-color: #fff !important;
    box-shadow: 0px 0px 5px #ef9325;
  }
}

.card-item-content {
  display: flex;
  flex-direction: row;
  //   justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  padding: 12px 10px 0px 30px;
}
.card--item-footer {
  position: absolute;
  bottom: 5px;
  right: 28px;
  width: 100%;
  text-align: right;
  .item-pagination {
    margin: 0px 12px 12px 0px;
  }
  .prev-page,
  .next-page {
    display: inline-block;
    border: 1px solid #d9d9d9;
    height: 32px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0px 6px;
  }
}
</style>